<template>
    <div>
        <!-- v-model 是将数据绑定在表单元素上，实现数据的双向绑定 -->
         <input type="text" v-model="msg">
         <h1>{{ msg }}</h1>

         <!-- 修饰符 -->
          <p>
            <!-- .lazy 懒加载 失去焦点的时候执行双向绑定 -->
            <input type="text" v-model.lazy="msg">
          </p>
          <p>
            <!-- .number 数字 如果input 一开始不是一个数字 功能失效 -->
            <input type="text" v-model.number = "num">{{ typeof num }}
          </p>
          <p>
            <!-- trim 去掉前空格 -->
            <input type="text" v-model.trim = "msg">
          </p>
          <hr>
          <!-- check 可以通过双向绑定一个布尔值 控制是否选中 -->
          <input type="checkbox" v-model="isOK" >{{ isOK }}

          <h2>多个多选框</h2>
          <input type="checkbox" value="0" v-model="arr">喜羊羊
          <input type="checkbox" value="1" v-model="arr">懒羊羊
          <input type="checkbox" value="2" v-model="arr">慢羊羊
          {{ arr }}

          <h2>绑定单选框</h2>
          <div>
            <input type="radio" value="0" nam="sex" v-model="sex">男
            <input type="radio" value="1" nam="sex" v-model="sex">女
            {{ sex }}
          </div>
          <!-- 绑定事件： -->
          <button @click="change">切换性别</button>
          <!-- .enter 接回车键触发 -->
           <button @keyup.enter="sum">回车</button>
    </div>
</template>


<script>
    export default{
        data(){
            return {
                msg:"孙悟空",
                num:null,
                isOK: true,
                arr: ['0'],
                sex: 0
            }
        },
        methods:{
        change(){
            console.log("111111")
            // 通过this去访问和修改变量
            this.sex=  10
        },
        sum(){
            console.log("回车触发")
        }
            
        },
    }

</script>


<style lang="scss" scoped>


</style>